<template>
	<div class="div1">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>积分管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<el-form :inline="true" :model="form" class="demo-form-inline" size="large">
		<el-form-item label="用户名">
			<el-input v-model="form.username" placeholder="请输入用户名" clearable />
		</el-form-item>
		<el-form-item label="昵称">
			<el-input v-model="form.nickname" placeholder="请输入昵称" clearable />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="query">搜索</el-button>
			
		</el-form-item>

	</el-form>
	<el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange" :row-style="{ height: '58px' }">
		<!-- <el-table-column type="selection"  width="50" /> -->
		<el-table-column prop="id" label="ID" />
		<el-table-column prop="user_id" label="用户ID" />
		<el-table-column prop="users.nickname" label="用户昵称" />
		<el-table-column prop="users.username" label="用户名称" />
		<el-table-column prop="points" label="积分" />
		
	</el-table>
	<div class="demo-pagination-block">
		<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10,15, 20]"
			:size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>

</template>

<script lang="ts" setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	const form = reactive({
		username: '',
		nickname: '',
	})
	const tableData = ref([])
	const total = ref(0)
	const currentPage = ref(1) // 当前页
	const pageSize = ref(10) // 每页显示条目数
	const size = 'default' // 分页大小
	const handleSizeChange = (val) => {
		pageSize.value = val;
		query();
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		query();
	}
	const query = () => {
		axios.get(
			`points/page?users.username=${form.username}&users.nickname=${form.nickname}&pageNum=${currentPage.value}&pageSize=${pageSize.value}`
		).then(resp => {
			if (resp.code == 200) {
				console.log(resp.data);
				tableData.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('查询失败')
			}
		})
	}
	const remove = (id) => {
		console.log('当前行的数据', id);
		ElMessageBox.confirm(
			'此操作将永久删除该数据, 是否继续?',
			'提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
		)
			.then(() => {
				axios.delete(`points/${id}`).then((resp) => {
					console.log('删除后：', resp);
					if (resp.code == 200) {
						ElMessage({
							message: '删除成功',
							type: 'success',
						})
					} else {
						ElMessage.error('删除失败')
					}
				}).finally(() => {
					query();
				});

			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})

	}
	const ids = ref('')
	const handleSelectionChange = (selection) => {
		ids.value = selection.map(item => item.id).join(',')
		console.log('批量删除的ids为:', ids.value)
	}
	const batchDelete = () => {
		console.log('ids', ids.value);
		if (!ids.value) {
			ElMessage.info('请选择要删除的数据')
			return
		}
		ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			axios.delete(`permission?ids=${ids.value}`).then(res => {
				ElMessage.success('删除成功')
				query();
			})
		}).catch(() => {
			ElMessage.info('已取消删除')
		}).finally(() => {
			query();
		});
	}
	onMounted(() => {
		query()
	})
</script>

<style scoped>
	.div1 {
		border-bottom: 1px solid #eeeeee;
		width: 100%;
		/* height: 30px; */
	}

	.demo-form-inline {
		color: #696a6e;
	}
</style>